<template>
	<view class="addressEdit">
		<u-navbar :title="title" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight">
		</u-navbar>
		<view class="content">
			<view class="row">
				<view class="nominal">
					收货人
				</view>
				<view class="input">
					<input placeholder="请输入收货人姓名" type="text" v-model="receiveName" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					手机号码
				</view>
				<view class="input">
					<input placeholder="请输入收货人手机号码" maxlength="11" type="number" v-model="receiveMobile" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @tap="selectCity">
					{{region}}
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					详细地址
				</view>
				<view class="input">
					<textarea v-model="receiveAddress" auto-height="true" placeholder="请输入详细地址" class="w-100"></textarea>
				</view>
			</view>
			<!-- <view class="row">
				<view class="nominal">
					身份证号
				</view>
				<view class="input">
					<input placeholder="请输入身份证号" type="number" v-model="pcode" maxlength="18"/>
				</view>
			</view> -->
			<view class="row">
				<view class="nominal">
					是否设置默认
				</view>
				<view class="input switch">
					<switch color="#ECA52B" :checked="defaultFlag" @change="defaultChange" />
				</view>
			</view>
		</view>
		<view class="save" @tap="save">
			<view class="btn">
				保存地址
			</view>
		</view>
		
		<ehPicker @conceal="conceal" :addressInfo="addressInfo" v-if="showCity" />
		<!-- <selectCity :show="showCity" @sureSelectArea="onSetCity" @hideShow="onHideShow"></selectCity> -->
	</view>
</template>

<script>
	import selectCity from '@/components/selectCity/index'
	import {addReceive,updateReceive,receiveDetail} from '@/common/api/customer.js'
	import { Debounce } from "@/common/utils/tools.js";
	import ehPicker from './erha-picker1.vue';
	export default {
		components: {
			selectCity,
			ehPicker
		},
		data() {
			return {
				title: '新增收货地址',
				receiveName: '',
				receiveMobile: '',
				receiveProvince: '',
				receiveCity: '',
				receiveArea: '',
				receiveAddress: '',
				showCity: false,
				region: '请选择所在地区',
				defaultFlag: false,
				addressId: '',

				addressInfo: {},
				pcode: null,
			};
		},
		onLoad(options) {
			if(options.from == 'edit') {
				this.title = '编辑收货地址'
				this.addressId = options.addressId
				this.getReceiveDetail()
			}
		},
		methods: {
			// 选择地区，点击确认
			conceal(param) {
			    // 获取到传过来的 省 市 区 县数据
			    // console.log(param,'获取到传过来的 省 市 区 县数据');
				this.receiveProvince = param.province
				this.receiveCity = param.city
				this.receiveArea = param.area
				this.receiveTown = param.street
				if(param.street == '街道' || param.street == '请选择街道'){
					this.street = '无'
				}else{
					this.street = param.street
				}
				this.region = this.receiveProvince + this.receiveCity + this.receiveArea +this.receiveTown
				
			    // 选择完毕后隐藏
			    this.showCity = false;
			},
			getReceiveDetail() {
				receiveDetail(this.addressId).then(res => {
					this.receiveProvince = res.data.receiveProvince;
					this.receiveCity = res.data.receiveCity;
					this.receiveArea = res.data.receiveArea;
					this.receiveTown = res.data.receiveTown == '无' ? '' : ( res.data.receiveTown || '' );
					this.receiveAddress = res.data.receiveAddress;
					this.region = res.data.receiveProvince + res.data.receiveCity + res.data.receiveArea + (res.data.receiveTown  == '无' ? '' : ( res.data.receiveTown || '' ));
					this.receiveName = res.data.receiveName;
					this.receiveMobile = res.data.receiveMobile;
					this.defaultFlag = res.data.defaultFlag == 1 ? true : false;
					this.pcode = res.data.pcode;
				})
			},
			save:Debounce(function (e) {
				if(!this.receiveName) {
					return this.$msg('请输入收件人姓名')
				}
				if(!this.receiveMobile) {
					return this.$msg('请输入收件人手机号码')
				}
				if(!this.receiveProvince || this.receiveProvince == '省-' || this.receiveCity == '市-' || this.receiveArea == '区/县-' || this.receiveTown == '街道') {
					return this.$msg('请正确选择省-市-区/县-街道')
				}
				if(!this.receiveAddress) {
					return this.$msg('请输入详细地址')
				}
				let data = {
					receiveName: this.receiveName,
					receiveMobile: this.receiveMobile,
					receiveProvince: this.receiveProvince,
					receiveCity: this.receiveCity,
					receiveArea: this.receiveArea,
					receiveAddress: this.receiveAddress,
					defaultFlag: this.defaultFlag ? 1 : 0,
				}
				if(this.addressId) {
					data.receiveId = this.addressId
					updateReceive(data).then(res => {
						this.$msg(res.msg)
						setTimeout(()=> {
							uni.navigateBack()
						}, 1000)
					})
				} else {
					addReceive(data).then(res => {
						this.$msg(res.msg)
						setTimeout(()=> {
							uni.navigateBack()
						}, 1000)
					})
				}
			},800),
			defaultChange(e) {
				this.defaultFlag = e.detail.value
			},
			selectCity() {
				this.showCity = true
			},
			onHideShow() {
				this.showCity = false
			},
			//选中省市区
			onSetCity(e) {
				let data = e.detail.target.dataset;
				this.region = data.province + data.city + data.area;
				this.receiveProvince = data.province;
				this.receiveCity = data.city;
				this.receiveArea = data.area;
				this.showCity = false
			},
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 26rpx !important;
	}

	.box {
		background: rgba(0, 0, 0, 0.6);
		height: 100%;
		width: 100%;
	}

	.addressEdit {
		.top {
			padding: 0 4%;
			height: 88upx;
			width: 92%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #d93728;
			color: white;

			image {
				width: 30upx;
				height: 30upx;
			}
		}

		.save {
			view {
				display: flex;
			}

			margin-top: 200rpx;
			width: 100%;
			height: 120upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
				width: 70%;
				height: 80upx;
				border-radius: 80upx;
				background: #ECA52B;
				color: #ffffff;
				justify-content: center;
				align-items: center;

				.icon {
					height: 80upx;
					color: #fff;
					font-size: 30upx;
					justify-content: center;
					align-items: center;
				}

				font-size: 30upx;
			}
		}

		.content {
			display: flex;
			flex-wrap: wrap;

			view {
				display: flex;
			}

			.row {
				width: 94%;

				margin: 0 3%;
				border-bottom: solid 1upx #eee;

				.nominal {
					width: 30%;
					height: 120upx;
					font-weight: 200;
					font-size: 28rpx;
					align-items: center;
				}

				.input {
					width: 70%;
					padding: 20upx 0;
					align-items: center;
					font-size: 30upx;

					&.switch {
						justify-content: flex-end;
					}

					.textarea {
						margin: 20upx 0;
						min-height: 120upx;
					}
				}

				.del {
					width: 100%;
					height: 100upx;
					justify-content: center;
					align-items: center;
					font-size: 36upx;
					color: #f06c7a;
					background: linear-gradient(90deg, rgba(26, 206, 205, 1) 0%, rgba(184, 228, 111, 1) 100%);
					border-bottom: solid 1upx #eee;
				}
			}
		}

	}
</style>